<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>需求进度卡片设计方案</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #f5f5f5;
            padding: 20px;
        }
        .design-section {
            margin-bottom: 40px;
            background: white;
            border-radius: 12px;
            padding: 20px;
        }
        .design-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #1f2937;
        }
        .clickable {
            transition: all 0.2s ease;
            cursor: pointer;
        }
        .clickable:active {
            transform: scale(0.98);
        }
        /* 进度条样式 */
        .progress-bar {
            height: 6px;
            border-radius: 3px;
            background: #e5e7eb;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        /* 状态颜色 */
        .status-pending { color: #d97706; background: #fef3c7; }
        .status-processing { color: #6366f1; background: #eef2ff; }
        .status-completed { color: #059669; background: #d1fae5; }
        .status-cancelled { color: #6b7280; background: #f3f4f6; }
    </style>
</head>
<body>
    <h1 class="text-2xl font-bold mb-6 text-center">需求进度卡片设计方案</h1>

    <!-- 方案1：简洁进度条卡片（推荐） -->
    <div class="design-section">
        <div class="design-title">方案1：简洁进度条卡片（推荐）</div>
        <div class="bg-gray-50 rounded-xl p-4 border border-gray-200 clickable" onclick="alert('查看详情')">
            <div class="flex items-start justify-between mb-3">
                <div class="flex-1">
                    <div class="flex items-center space-x-2 mb-2">
                        <h3 class="text-base font-bold text-gray-800">系统优化需求</h3>
                        <span class="status-processing px-2 py-0.5 rounded-full text-xs font-medium">处理中</span>
                    </div>
                    <p class="text-sm text-gray-500 mb-2">优化现有系统性能，提升响应速度...</p>
                    <div class="text-xs text-gray-400">最后更新：2小时前</div>
                </div>
                <i class="fas fa-chevron-right text-gray-400 mt-1"></i>
            </div>
            <!-- 进度条 -->
            <div class="mt-3">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-600">当前进度</span>
                    <span class="text-xs font-semibold text-indigo-600">60%</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill bg-indigo-500" style="width: 60%"></div>
                </div>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：信息完整，进度可视化清晰，符合设计规范</p>
    </div>

    <!-- 方案2：时间线简化版 -->
    <div class="design-section">
        <div class="design-title">方案2：时间线简化版（更直观）</div>
        <div class="bg-gray-50 rounded-xl p-4 border border-gray-200 clickable" onclick="alert('查看详情')">
            <div class="flex items-start justify-between mb-3">
                <div class="flex-1">
                    <div class="flex items-center space-x-2 mb-2">
                        <h3 class="text-base font-bold text-gray-800">系统优化需求</h3>
                        <span class="status-processing px-2 py-0.5 rounded-full text-xs font-medium">处理中</span>
                    </div>
                    <p class="text-sm text-gray-500 mb-3">优化现有系统性能，提升响应速度...</p>
                </div>
                <i class="fas fa-chevron-right text-gray-400 mt-1"></i>
            </div>
            <!-- 简化时间线 -->
            <div class="flex items-center space-x-2 pt-3 border-t border-gray-200">
                <div class="flex items-center space-x-1 flex-1">
                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span class="text-xs text-gray-600">需求已提交</span>
                </div>
                <div class="flex-1 h-0.5 bg-indigo-500"></div>
                <div class="flex items-center space-x-1 flex-1">
                    <div class="w-2 h-2 bg-indigo-500 rounded-full ring-2 ring-indigo-200"></div>
                    <span class="text-xs font-medium text-indigo-600">需求分析中</span>
                </div>
                <div class="flex-1 h-0.5 bg-gray-200"></div>
                <div class="flex items-center space-x-1 flex-1">
                    <div class="w-2 h-2 bg-gray-300 rounded-full"></div>
                    <span class="text-xs text-gray-400">待报价</span>
                </div>
            </div>
            <div class="text-xs text-gray-400 mt-2">最后更新：2小时前</div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：进度节点清晰，用户能快速了解当前处于哪个阶段</p>
    </div>

    <!-- 方案3：大卡片设计（信息丰富） -->
    <div class="design-section">
        <div class="design-title">方案3：大卡片设计（信息丰富）</div>
        <div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl p-4 border border-indigo-100 clickable" onclick="alert('查看详情')">
            <div class="flex items-start justify-between mb-3">
                <div class="flex-1">
                    <div class="flex items-center space-x-2 mb-2">
                        <h3 class="text-lg font-bold text-gray-800">系统优化需求</h3>
                    </div>
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="status-processing px-2 py-0.5 rounded-full text-xs font-medium">处理中</span>
                        <span class="text-xs text-gray-500">#REQ-2024-001</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">优化现有系统性能，提升响应速度，改善用户体验...</p>
                </div>
                <i class="fas fa-chevron-right text-gray-400 mt-1"></i>
            </div>
            <!-- 进度信息 -->
            <div class="bg-white rounded-lg p-3 mb-3">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-700">处理进度</span>
                    <span class="text-sm font-bold text-indigo-600">60%</span>
                </div>
                <div class="progress-bar bg-gray-100">
                    <div class="progress-fill bg-indigo-500" style="width: 60%"></div>
                </div>
                <div class="text-xs text-gray-500 mt-2">当前阶段：需求分析中</div>
            </div>
            <!-- 底部信息 -->
            <div class="flex items-center justify-between text-xs text-gray-500">
                <div class="flex items-center space-x-1">
                    <i class="fas fa-user text-gray-400"></i>
                    <span>顾问：李顾问</span>
                </div>
                <span>最后更新：2小时前</span>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：信息完整，包含顾问信息，适合需要展示更多细节的场景</p>
    </div>

    <!-- 方案4：紧凑型卡片（节省空间） -->
    <div class="design-section">
        <div class="design-title">方案4：紧凑型卡片（节省空间）</div>
        <div class="bg-white rounded-xl p-3 border border-gray-200 clickable shadow-sm" onclick="alert('查看详情')">
            <div class="flex items-center justify-between">
                <div class="flex-1 min-w-0">
                    <div class="flex items-center space-x-2 mb-1">
                        <h3 class="text-sm font-bold text-gray-800 truncate">系统优化需求</h3>
                        <span class="status-processing px-1.5 py-0.5 rounded text-xs font-medium flex-shrink-0">处理中</span>
                    </div>
                    <div class="flex items-center space-x-2 text-xs text-gray-500">
                        <span>60%</span>
                        <div class="flex-1 progress-bar h-1.5">
                            <div class="progress-fill bg-indigo-500" style="width: 60%"></div>
                        </div>
                        <span class="flex-shrink-0">2小时前</span>
                    </div>
                </div>
                <i class="fas fa-chevron-right text-gray-400 ml-2 flex-shrink-0"></i>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：节省空间，适合在首页展示多个需求或与其他内容共存</p>
    </div>

    <!-- 方案5：带图标和状态指示 -->
    <div class="design-section">
        <div class="design-title">方案5：带图标和状态指示（视觉突出）</div>
        <div class="bg-gray-50 rounded-xl p-4 border-l-4 border-indigo-500 clickable" onclick="alert('查看详情')">
            <div class="flex items-start space-x-3">
                <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-tasks text-indigo-600"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between mb-1">
                        <h3 class="text-base font-bold text-gray-800 truncate">系统优化需求</h3>
                        <span class="status-processing px-2 py-0.5 rounded-full text-xs font-medium ml-2 flex-shrink-0">处理中</span>
                    </div>
                    <p class="text-sm text-gray-500 mb-2 line-clamp-2">优化现有系统性能，提升响应速度，改善用户体验...</p>
                    <!-- 进度条 -->
                    <div class="mb-2">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs text-gray-600">进度</span>
                            <span class="text-xs font-semibold text-indigo-600">60%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill bg-indigo-500" style="width: 60%"></div>
                        </div>
                    </div>
                    <div class="text-xs text-gray-400">最后更新：2小时前</div>
                </div>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：左侧图标增加视觉层次，边框颜色突出状态</p>
    </div>

    <!-- 方案6：多需求展示（横向滚动） -->
    <div class="design-section">
        <div class="design-title">方案6：多需求展示（横向滚动）</div>
        <div class="flex space-x-3 overflow-x-auto pb-2" style="scrollbar-width: none;">
            <!-- 需求1 -->
            <div class="bg-gray-50 rounded-xl p-3 border border-gray-200 clickable flex-shrink-0" style="width: 280px;" onclick="alert('查看详情1')">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-bold text-gray-800 truncate">系统优化需求</h3>
                    <span class="status-processing px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0">处理中</span>
                </div>
                <div class="progress-bar mb-2">
                    <div class="progress-fill bg-indigo-500" style="width: 60%"></div>
                </div>
                <div class="text-xs text-gray-400">60% · 2小时前</div>
            </div>
            <!-- 需求2 -->
            <div class="bg-gray-50 rounded-xl p-3 border border-gray-200 clickable flex-shrink-0" style="width: 280px;" onclick="alert('查看详情2')">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-bold text-gray-800 truncate">数据分析平台</h3>
                    <span class="status-pending px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0">待处理</span>
                </div>
                <div class="progress-bar mb-2">
                    <div class="progress-fill bg-amber-500" style="width: 20%"></div>
                </div>
                <div class="text-xs text-gray-400">20% · 1天前</div>
            </div>
            <!-- 需求3 -->
            <div class="bg-gray-50 rounded-xl p-3 border border-gray-200 clickable flex-shrink-0" style="width: 280px;" onclick="alert('查看详情3')">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-bold text-gray-800 truncate">移动端开发</h3>
                    <span class="status-completed px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0">已完成</span>
                </div>
                <div class="progress-bar mb-2">
                    <div class="progress-fill bg-emerald-500" style="width: 100%"></div>
                </div>
                <div class="text-xs text-gray-400">100% · 3天前</div>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：可以展示多个需求，用户横向滑动查看，适合有多个进行中需求的用户</p>
    </div>

    <!-- 方案7：空状态设计 -->
    <div class="design-section">
        <div class="design-title">方案7：空状态设计（无需求时）</div>
        <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 text-center">
            <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fas fa-clipboard-list text-gray-400 text-2xl"></i>
            </div>
            <div class="text-gray-600 font-medium mb-1">暂无进行中的需求</div>
            <div class="text-sm text-gray-400 mb-4">提交您的第一个需求，开始使用我们的服务</div>
            <button class="bg-indigo-500 text-white rounded-lg px-4 py-2 text-sm font-medium clickable">
                <i class="fas fa-plus mr-1"></i>
                提交需求
            </button>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：友好的空状态提示，引导用户操作</p>
    </div>

    <!-- 设计建议 -->
    <div class="mt-8 p-4 bg-blue-50 rounded-xl">
        <h3 class="font-bold mb-2">设计建议：</h3>
        <ul class="text-sm text-gray-700 space-y-2">
            <li>
                <strong>方案1（简洁进度条卡片）</strong>：<br>
                ✓ 推荐用于首页，信息完整且不占用过多空间<br>
                ✓ 进度条直观，符合设计规范<br>
                ✓ 点击跳转详情页
            </li>
            <li>
                <strong>方案2（时间线简化版）</strong>：<br>
                ✓ 如果用户需要快速了解当前处于哪个阶段<br>
                ✓ 进度节点可视化更清晰<br>
                ✓ 适合处理流程较复杂的需求
            </li>
            <li>
                <strong>方案6（多需求展示）</strong>：<br>
                ✓ 如果用户通常有多个进行中的需求<br>
                ✓ 横向滚动，节省垂直空间<br>
                ✓ 可以快速浏览所有需求
            </li>
            <li>
                <strong>方案4（紧凑型）</strong>：<br>
                ✓ 如果首页空间有限，需要展示其他内容<br>
                ✓ 信息精简但关键信息不缺失
            </li>
        </ul>
        <div class="mt-4 p-3 bg-white rounded-lg">
            <strong class="text-sm">核心设计原则：</strong>
            <ul class="text-xs text-gray-600 mt-2 space-y-1">
                <li>• 状态颜色：待处理(黄色)、处理中(蓝紫色)、已完成(绿色)</li>
                <li>• 进度可视化：使用进度条或时间线</li>
                <li>• 信息层次：标题 > 状态 > 进度 > 时间</li>
                <li>• 交互反馈：点击卡片跳转详情页</li>
                <li>• 空状态：无需求时显示引导信息</li>
            </ul>
        </div>
    </div>
</body>
</html>

